<template>
  <view>
    <l-background />
    <view class="margin-tb-16">
      <tui-list-cell v-for="(item,index) in settingList" :key="index" arrow :unlined="index===list.length-1" @click="jump(item.url)">
        <view class="flex-row list-item align-center">
          <text class="text-28 color-t1">{{ item.text }}</text>
        </view>
      </tui-list-cell>
    </view>
    <tui-list-cell v-if="isMainAccount" arrow unlined @click="jump('/user/cancel-account/cancel-account')">
      <view class="flex-row list-item align-center">
        <text class="text-28 color-t1">注销账号</text>
      </view>
    </tui-list-cell>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'SafetySetting',
  data() {
    return {
      list: [
        { text: '银行卡管理', url: '/user/bank-card/bank-card', auth: 'bank_view' },
        { text: '更换手机号码', url: '/passport/set-phone/set-phone' },
        { text: '重置登录密码', url: '/passport/forget-password/forget-password?setting=1' }
      ]
    }
  },
  computed: {
    isMainAccount() {
      return this.userInfo.certType ? this.userInfo.certType.includes('20') && this.userInfo.certTypeLabel === 'autoCompany' : false
    },
    settingList() {
      const arr = []
      this.list.forEach(item => {
        if (!item.auth || this.auth.includes(item.auth)) arr.push(item)
      })
      return arr
    },
    ...mapGetters({
      userInfo: 'userInfo',
      auth: 'auth'
    })
  }
}
</script>

<style scoped>

</style>
